<template>
  <view class="detail-interflow-box">
    <view class="detail-list">
      <view class="planet-box-content">
        <view class="planet-list">
          <view class="list">
            <view class="list-ment">
              <view class="user-member">
                <image v-if="contentMap.avatar" :src="contentMap.avatar" />
                <image v-else src="@/static/interflow/avtor.png" />
                <view class="member-right">
                  <view class="right-name">
                    <text>{{ contentMap.createName }}</text>
                  </view>
                  <view>
                    <text class="right-time">{{ contentMap.createTime }}</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="content-title">
              <text class="title-content">{{ contentMap.title }}</text>
              <view class="introduce-box">
                <view class="introduce-content" ref="content" v-html="contentMap.content"></view>
              </view>
              <view class="content-bottom">
                <view class="bottom-l">
                  <view class="dz-box" style="margin-right:40px" @click.stop="handleLike(contentMap)">
                    <image mode="heightFix" v-if="!contentMap.likeFlag" src="@/static/interflow/dianzan.png" />
                    <image mode="heightFix" v-else src="@/static/interflow/dz-active.png" />
                    <text
                      :style="{ color: contentMap.likeFlag ? '#1890ff' : '#333333' }">{{ contentMap.likeNumber }}</text>
                  </view>
                  <view class="dz-box" @click.stop="hanldleComment(contentMap)">
                    <image mode="heightFix" src="@/static/interflow/xinx.png" /><text>{{
                            contentMap.commentNumber
                          }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

      </view>
    </view>
    <view class="comment-detail pd15">
      <view>
        <view class="comment-list-box">
          <view class="list-detail" v-for="(item, index) in commentContent" :key="index">
            <view class="detail-content" @click="hanldeReplyShow">
              <image mode="widthFix" src="@/static/interflow/avtor.png" class="avtior-detail" />
              <view class="content-box">
                <view class="comment-menber">
                  <text class="member-l">{{ item.memberName }}</text>：<text>{{ item.content }}</text>
                </view>
                <view class="comment-time">
                  <text class="time-l">{{ item.createTime }}</text>
                </view>
              </view>
            </view>
            <view v-if="item.children && item.children.length > 0" style="margin-left:30px">
              <view class="detail-content" v-for="(childComment, i) in item.children" :key="i">
                <view class="content-box">
                  <view class="comment-menber">
                    <text class="member-l">{{
                              childComment.memberName
                            }}</text><text class="member-hf">回复</text><text class="member-l"></text><text
                      class="member-l">{{
                              childComment.beRepliedName
                            }}</text>：<text>{{ childComment.content }}</text>
                  </view>
                  <view class="comment-time">
                    <text class="time-l">{{
                              childComment.createTime
                            }}</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="view-more" v-if="
                        !item.viewMore &&
                          item.children &&
                          item.children.length >= 6
                      " @click="handleViewMore(item, index)">
              <text>查看共{{ item.children.length + 1 }}条回复</text><a-icon type="caret-down" />
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-popup :show="replyShow" @close="hanldeReplyClose">
      <view class="reply-box" :style="{marginBottom: keyboardHeight +'px'}">
        <view class="reply-top">
          <text>回复</text><text>小飞机</text>
        </view>
        <view class="reply-content">
          <u--textarea :adjust-position="false" :border="none" :maxlength="10" v-model="replyContent" placeholder="请输入"
            autoHeight></u--textarea>
        </view>
        <view class="reply-bottom">
          <text class="bot-num">({{count}}/1000)</text>
          <view class="bot-btn" @click="hanldeReply">
            <text>发布</text>
          </view>

        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    components: {

    },
    data() {
      return {
        currentIndex: 0,
        textHeight: "",
        isShowMore2: false,
        isStatus2: false,
        checkTitle: "展开",
        contentMap: {
          id: 1,
          avatar: "",
          createName: "张三",
          title: "标题",
          content: "内容",
          commentNumber: 15,
          likeNumber: 2,
          createTime: "2024-01-09 11:22:56"
        },
        replyContent: "",
        replyShow: false,
        userInfo: {
          userId: ""
        },
        commentContent: [

          {
            articleId: "7a9fdd29bd614aa5bfc5af1a787e8a09",
            beRepliedId: "373cfdce814349c1a9f6cdc6029ed2e9",
            beRepliedName: "冯九",
            "children": null,
            "content": "1111",
            "createBy": null,
            children: [{
                articleId: "7a9fdd29bd614aa5bfc5af1a787e8a09",
                beRepliedId: "373cfdce814349c1a9f6cdc6029ed2e9",
                beRepliedName: "冯九",
                "children": null,
                "content": "冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九冯九",
                "createBy": null,
                "createTime": "2024-01-05 11:16:55",
                "id": "8bff2596cbdf4a09a60c631b745d6e05",
                "memberId": "3b331c1c11ce4cde8244b2e91e6f4ed4",
                "memberName": "何文海",
                "parentId": "3603e57be0df48ac83f3199e7c968630",
                "parentIds": null,
                "seq": null,
                "sort": 0,
                "topFlag": false
              },
              {
                articleId: "7a9fdd29bd614aa5bfc5af1a787e8a09",
                beRepliedId: "373cfdce814349c1a9f6cdc6029ed2e9",
                beRepliedName: "冯九",
                "children": null,
                "content": "888888888",
                "createBy": null,
                "createTime": "2024-01-05 11:16:55",
                "id": "8bff2596cbdf4a09a60c631b745d6e05",
                "memberId": "3b331c1c11ce4cde8244b2e91e6f4ed4",
                "memberName": "何文海",
                "parentId": "3603e57be0df48ac83f3199e7c968630",
                "parentIds": null,
                "seq": null,
                "sort": 0,
                "topFlag": false
              },
              {
                articleId: "7a9fdd29bd614aa5bfc5af1a787e8a09",
                beRepliedId: "373cfdce814349c1a9f6cdc6029ed2e9",
                beRepliedName: "冯九",
                "children": null,
                "content": "888888888",
                "createBy": null,
                "createTime": "2024-01-05 11:16:55",
                "id": "8bff2596cbdf4a09a60c631b745d6e05",
                "memberId": "3b331c1c11ce4cde8244b2e91e6f4ed4",
                "memberName": "何文海",
                "parentId": "3603e57be0df48ac83f3199e7c968630",
                "parentIds": null,
                "seq": null,
                "sort": 0,
                "topFlag": false
              }
            ],
            "createTime": "2024-01-05 11:16:55",
            "id": "8bff2596cbdf4a09a60c631b745d6e05",
            "memberId": "3b331c1c11ce4cde8244b2e91e6f4ed4",
            "memberName": "何文海",
            "parentId": "3603e57be0df48ac83f3199e7c968630",
            "parentIds": null,
            "seq": null,
            "sort": 0,
            "topFlag": false
          },

          {
            articleId: "7a9fdd29bd614aa5bfc5af1a787e8a09",
            beRepliedId: "373cfdce814349c1a9f6cdc6029ed2e9",
            beRepliedName: "冯九",
            "children": null,
            "content": "1111",
            "createBy": null,
            children: [{
              articleId: "7a9fdd29bd614aa5bfc5af1a787e8a09",
              beRepliedId: "373cfdce814349c1a9f6cdc6029ed2e9",
              beRepliedName: "冯九",
              "children": null,
              "content": "888888888",
              "createBy": null,
              "createTime": "2024-01-05 11:16:55",
              "id": "8bff2596cbdf4a09a60c631b745d6e05",
              "memberId": "3b331c1c11ce4cde8244b2e91e6f4ed4",
              "memberName": "何文海",
              "parentId": "3603e57be0df48ac83f3199e7c968630",
              "parentIds": null,
              "seq": null,
              "sort": 0,
              "topFlag": false
            }],
            "createTime": "2024-01-05 11:16:55",
            "id": "8bff2596cbdf4a09a60c631b745d6e05",
            "memberId": "3b331c1c11ce4cde8244b2e91e6f4ed4",
            "memberName": "何文海",
            "parentId": "3603e57be0df48ac83f3199e7c968630",
            "parentIds": null,
            "seq": null,
            "sort": 0,
            "topFlag": false
          },

        ],
        commentNumber: 0,
        isCommentDisabled: false,
        temporaryArr: [],
        systemInfo: {},
        keyboardHeight: 0,
        count: 0
      };
    },
    watch: {
      replyContent: {
        handler(newVal) {
          this.count = newVal.length
        },
      }
    },

    created() {


    },

    onLoad() {
      uni.setNavigationBarTitle({
        title: '测试测试测试测试测试测试'
      });

    },
    async onShow() {

    },
    onReady() {
      uni.onKeyboardHeightChange(res => {
        this.keyboardHeight = res.height
      })
    },

    methods: {
      //查询评论
      getCommentList() {
        return new Promise(resove => {
          this.temporaryArr = JSON.parse(JSON.stringify(this.commentContent));
          postAction("/b/chatBoard/comment/queryList", {
            order: "DESC,ASC",
            orderBy: "topFlag,createTime",
            params: {
              articleId: this.contentMap.id
            }
          }).then(res => {
            if (res.data.success) {
              this.replyShow = false; //评论框隐藏
              let commentNumber = [];
              res.data.data.forEach(item => {
                // item.replyOneShow = false; //一级回复框隐藏
                // item.replyOneOperateShow = false; //一级操作框
                // item.replyOneContent = ""; //一级回复内容
                // if (item.children && item.children.length > 0) {
                //   item.children.forEach(value => {
                //     value.replyTwoShow = false; //二级回复框隐藏
                //     value.replyTwoOperateShow = false; //二级操作框
                //     value.replyTwoContent = ""; //二级回复内容
                //   });
                // }
              });
              TreeUtil.forEachNodes(res.data.data, node => {
                this.temporaryArr.forEach(item => {
                  if (item.id == node.id) {
                    node.viewMore = item.viewMore;
                  }
                });
                commentNumber.push(node);
              });
              this.commentNumber = commentNumber.length;
              this.contentMap.commentNumber = this.commentNumber;
              this.commentContent = [...res.data.data];
              resove();
            }
          });
        });
      },

      handleCheckMore(item) {
        this.contentMap.isShowMore2 = !this.contentMap.isShowMore2;
        this.contentMap.isStatus2 = !this.contentMap.isStatus2;
        this.$forceUpdate();
      },

      //点赞
      handleLike(contentMap) {
        if (!contentMap.likeFlag) {
          //用户点赞
          getAction(`/b/chatBoard/like/pick/${contentMap.id}`).then(res => {
            if (res.data.success) {
              contentMap.likeNumber++;
              contentMap.likeFlag = true;
              this.$emit("handleLikeSuccess", contentMap);
            }
          });
        } else {
          // 取消点赞
          deleteAction(`/b/chatBoard/like/disPick/${contentMap.id}`).then(res => {
            if (res.data.success) {
              contentMap.likeNumber--;
              contentMap.likeFlag = false;
              this.$emit("handleLikeSuccess", contentMap);
            }
          });
        }
      },

      hanldeReplyShow() {
        debugger
        this.replyShow = true;
      },

      hanldeReplyClose() {
        this.replyShow = false;
        this.replyContent = "";
      },

      //评论
      hanldeReply() {
        this.replyShow = false
        this.isCommentDisabled = true;
        postAction("/b/chatBoard/comment", {
            articleId: this.contentMap.id,
            content: this.replyContent
          })
          .then(res => {
            this.hanldeReplyClose();
            this.$message.success("评论成功");
            this.getCommentList().then(() => {
              this.$emit("handleLikeSuccess", this.contentMap);
            });
          })
          .finally(() => {
            this.isCommentDisabled = false;
          });
      },

      //第一级回复
      mouseenterOne(item, index) {
        item.replyOneOperateShow = true;
        this.$set(this.commentContent, index, item);
      },
      mouseleaveOne(item, index) {
        item.replyOneOperateShow = false;
        this.$set(this.commentContent, index, item);
      },

      handleReplyOneShow(item, index) {
        item.replyOneShow = true;
        this.$set(this.commentContent, index, item);
      },
      hanldeReplyOneClose(item, index) {
        item.replyOneShow = false;
        this.$set(this.commentContent, index, item);
      },
      handleReplyOne(item) {
        this.isCommentDisabled = true;
        postAction("/b/chatBoard/comment", {
          articleId: this.contentMap.id,
          parentId: item.id,
          beRepliedId: item.memberId,
          content: item.replyOneContent
        }).then(res => {
          this.hanldeReplyClose();
          // item.replyOneShow = false;
          this.$message.success("回复成功");
          this.getCommentList().then(() => {
            this.isCommentDisabled = false;
            this.$emit("handleLikeSuccess", this.contentMap);
          });
        })
      },
      hanldeReplyDelete(item) {
        deleteAction(`/b/chatBoard/comment/${item.id}`).then(res => {
          if (res.data.success) {
            this.getCommentList().then(() => {
              this.$emit("handleLikeSuccess", this.contentMap);
            });
            this.$message.success("删除成功！");
          }
        });
      },

      //第二级回复
      mouseenterTwo(item, childComment, i, index) {
        childComment.replyTwoOperateShow = true;
        this.$set(this.commentContent[index].children, i, childComment);
      },

      mouseleaveTwo(item, childComment, i, index) {
        childComment.replyTwoOperateShow = false;
        this.$set(this.commentContent[index].children, i, childComment);
      },

      handleReplyTwoShow(item, childComment, i, index) {
        childComment.replyTwoShow = true;
        this.$set(this.commentContent[index].children, i, childComment);
      },

      hanldeReplyTwoClose(item, childComment, i, index) {
        childComment.replyTwoShow = false;
        this.$set(this.commentContent[index].children, i, childComment);
      },

      handleReplyTwo(item, childComment) {
        this.isCommentDisabled = true;
        postAction("/b/chatBoard/comment", {
          articleId: this.contentMap.id,
          parentId: item.id,
          beRepliedId: childComment.memberId,
          content: childComment.replyTwoContent
        }).then(res => {
          this.hanldeReplyClose();
          // item.replyOneShow = false;
          this.$message.success("回复成功");
          this.getCommentList().then(() => {
            this.isCommentDisabled = false;
            this.$emit("handleLikeSuccess", this.contentMap);
          });
        })
      },
      handleViewMore(item, index) {
        item.viewMore = true;
        this.$set(this.commentContent, index, item);
      }
    },
  };
</script>

<style lang="scss">
  .detail-interflow-box {
    min-height: 100vh;
    width: 100vw;
    background: #fff;

    .detail-top {
      position: relative;
      background: #e95115;
      overflow: hidden;

      .detail-banner {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
      }

      .top-box {
        z-index: 3;
        position: relative;

        .detail-back {
          width: 23px;
          margin-left: 15px;
        }

        .top-user {
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          align-items: center;
          padding-bottom: 20px;

          .user-l {
            display: flex;
            align-items: center;

            .user-avtor {
              width: 80px;
              height: 80px;
              border-radius: 5px;
            }

            .l-msg {
              margin-left: 15px;
            }

            .msg-name {
              margin-bottom: 10px;

              text {
                font-size: 40rpx;
                color: #fff;
                font-weight: 700;
              }

            }

            .msg-member {
              text {
                color: #fff;
              }
            }
          }

          .user-r {
            background: rgba(219, 220, 216, 0.6);
            border-radius: 20px;
            height: 30px;
            line-height: 30px;
            width: 60px;
            text-align: center;

            text {
              color: #fff;
            }
          }
        }
      }
    }

    .detail-tab {
      background: #fff;
      display: flex;
      justify-content: space-between;
      padding: 10px 15px;
      align-items: center;

      .tab-l {
        display: flex;

        .active {
          color: #fff;
          background-color: #ea5115;
        }

        text {
          font-size: 32rpx;
          padding: 5px 10px;
          border-radius: 20px;
        }

        .l-cont {
          display: flex;
          align-items: center;

          .tab-jh {
            width: 15px;
            margin-right: 3px;
          }
        }

        .l-mid {
          margin-left: 20px;
          margin-right: 20px;
        }
      }

      .tab-r {
        .tab-cd {
          width: 20px;
        }
      }
    }

    .planet-box-content {
      border-radius: 5px;
    }

    .planet-box-content {


      .planet-list {
        padding: 15px 15px 0 15px;
        background: #fff;
        border-radius: 5px;
      }

      .list {
        border-bottom: 1px solid #dedcdc;
        padding-bottom: 15px;
      }

      .list-ment {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .jh-img {
          height: 45px;
          margin-right: 10px;
        }

        .user-essenceFlag {
          display: flex;
          align-items: center;

          .is-jh-box {
            display: flex;
            align-items: center;
            background: rgba(234, 81, 21, 0.1);
            padding: 3px 5px;
            border-radius: 20px;

            text {
              color: #ea5115;
              font-size: 12px;
            }

            image {
              height: 10px;
              margin-right: 3px;
            }
          }
        }
      }

      .dz-box {
        display: flex;
        align-items: center;

        text {
          margin-left: 2px;
        }
      }

      .user-member {
        display: flex;
        align-items: center;

        image {
          width: 50px;
          height: 50px;
          margin-right: 10px;
        }
      }

      .content-title {
        margin-left: 60px;

        .title-content {
          font-size: 32rpx;
          font-weight: 700;
          margin-top: 10px;
          margin-bottom: 5px;
        }
      }

      .status-text {
        display: -webkit-box;
        display: -ms-flexbox;
        -webkit-line-clamp: 4;
        /* 控制显示的行数 */
        -webkit-box-orient: vertical;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;

        &::before {
          content: "";
          float: right;
          height: 100%;
          margin-bottom: -17px;
        }
      }

      .introduce-box {
        .check-more {
          float: right;
          clear: both;
          margin-right: 10px;
          color: #2570fd;
          cursor: pointer;
          z-index: 999;
        }
      }

      .content-bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
        align-items: center;
        cursor: pointer;

        .bottom-l {
          display: flex;
          align-items: center;
        }

        span {
          color: #7a7979;
        }

        image {
          height: 20px;

        }

        .bottom-r {
          align-items: center;
        }
      }

      .member-right {
        .right-name {
          color: #f96d44;
          font-size: 32rpx;
          margin-bottom: 5px;
        }

        .right-time {
          color: #cdcaca;
        }
      }
    }

    .article-operate-box {
      display: flex;
      align-items: center;

      .operate-jh {
        line-height: 20px;
        padding: 0 5px;

        text {
          font-size: 10px;
          color: #ea5115;
        }

        background: rgba(219, 220, 216, 0.6);
      }

      image {
        height: 20px;
        margin-left: 5px;
      }


    }

    .eheme-essence-box {
      padding: 20px;

      .essence-content {
        text-align: center;
        padding: 10px;
      }
    }

    .view-more {
      margin-left: 30px;
      color: #f96d44;
      margin-top: 10px;
      cursor: pointer;
    }

    .comment-detail {
      padding-top: 15px;
    }

    .comment-list-box {
      max-height: 480px;
      overflow: auto;
    }

    .list-detail {
      cursor: pointer;

      .member-hf {
        color: #aaa8ab;
        margin-left: 3px;
        margin-right: 3px;
      }

      .comment-operate {
        // display: none;
      }

      &:hover {
        .comment-operate {
          // display: block;
        }
      }

      .avtior-detail {
        width: 25px;
        height: 25px;
        margin-right: 8px;
      }

      .detail-content {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
      }

      .member-l {
        color: #f96d44;
      }

      .comment-time {
        font-size: 12px;
        width: 100%;
        display: flex;
        cursor: pointer;

        // justify-content: space-between;
        .time-l {
          margin-right: 50px;
          color: #cdcaca;
        }
      }
    }

    .reply-box {
      background: #fff;
      padding: 15px 15px 5px 15px;

      .reply-top {
        margin-bottom: 10px;

        text {
          color: #aaa8ab;
          margin-right: 5px;
        }
      }

      .reply-content {
        .u-textarea {
          padding: 0;
          height: 100px;
        }

        border-bottom: 1px solid #dedcdc;
      }

      .reply-bottom {
        display: flex;
        justify-content: flex-end;
        margin-top: 10px;
        align-items: center;

        .bot-btn {
          padding: 5px 6px;
          background: #e95115;
          border-radius: 20px;
          margin-left: 10px;

          .bot-num {
            color: #aaa8ab;
          }

          text {
            color: #fff;
          }
        }
      }
    }
  }
</style>